<!-- eslint-disable no-console -->
<script setup lang="ts">
const props = defineProps({
  treeData: {
    type: Array,
    default: () => {
      return []
    },
  },
  defaultProps: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

//处理点位名称
const formateDwName = computed(() => {
  return (dwData) => {
    return `${dwData.mc.replace(dwData.ssqyMc, '')}-${dwData.dwbh}`
  }
})

// 查询企业列表
const treeRef = ref(null) as any

const expandDefault: any = reactive([])
//默认展开/高亮节点
function defaultActive(id: any) {
  expandDefault.push(id) //默认树的第一个展开
  nextTick(() => {
    treeRef.value.setCurrentKey(id) // 默认树的第一个子节点高亮
  })
}

// 声明事件
const emit = defineEmits(['treeClick'])
// 树点击事件
const handleNodeClick = (data: any, node: any) => {
  // treeRef.value.setCurrentKey(data.id) // 默认树的第一个子节点高亮
  emit('treeClick', data, node)
}

defineExpose({
  defaultActive,
})
</script>

<template>
  <div class="h-50px lh-50px pl-20px text-16px font-bold bg-[#f8f8f8]">连云港石化基地企业列表</div>
  <div class="p-10px box-border overflow-auto" style="height: calc(100% - 60px)">
    <el-tree ref="treeRef" placeholder="请选择机构" size="large" node-key="id" highlight-current class="jglbTree"
      :data="treeData" :props="defaultProps" :check-strictly="true" :default-expand-all="false"
      :default-expanded-keys="expandDefault" :expand-on-click-node="false" @node-click="handleNodeClick">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span v-if="'wd' in data">{{ data.mc }}</span>
          <div v-else class="flex items-center">
            <img src="../assets/image/dataMonitor/jcdw-icon.png" alt="" class="inline-block w-12px h-12px mr-10px"
              style="vertical-align: middle" />
            <span class="truncate" :title="formateDwName(data)">
              {{ formateDwName(data) }}
            </span>
          </div>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<style scoped>
.el-tree {
  color: #333;
  font-size: 14px;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  /* 根据需要设置最大宽度 */
}
</style>
